* {
   margin: 0;
   padding: 0;
   user-select: none;
   box-sizing: border-box;
}

body {
   overflow: hidden;
}

a {
   text-decoration: none;
}

ul.el-menu {
   all: unset;
}

li.el-menu-item,
li.el-menu-item {
   all: unset;
}

li.el-menu-item:hover {
   background-color: #fff;
}

.el-menu-item [class^=el-icon-] {
   margin: 0;
   font-size: 1.5em;
}

.el-menu-item.is-active i {
   color: #222327;
}

/* 第一个div */
.main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: antiquewhite;
}

/* 底部导航栏 开始 */
.nav {
   position: absolute;
   width: 540px;
   height: 60px;
   bottom: 2vh;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
}

.nav ul {
   display: flex;
   width: 490px;
}

.nav ul li {
   height: 60px;
   flex: 1;
   position: relative;
   list-style: none;
   z-index: 2;
   display: flex;
   justify-content: center;
}

.nav ul li span {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   cursor: pointer;
   transition: .5s;
   transition-delay: 0s;
}

.nav ul li span i {
   color: #222327;
   font-size: 1.5em;
   overflow: visible
}

.nav ul li.active span {
   background-color: orange;
   transform: translateY(-27px);
   transition-delay: 0.25s;
}

.nav ul li.active span i {
   color: #fff;
}

.nav ul li span::before {
   content: "";
   position: absolute;
   top: 10px;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: orange;
   border-radius: 50%;
   filter: blur(5px);
   opacity: 0;
   transition: 0.5s;
   transition-delay: 0s;
}

.nav ul li.active span::before {
   opacity: 0.5;
   transition-delay: 0.25s;
}

.indicator {
   position: absolute;
   top: -35px;
   width: 70px;
   height: 70px;
   background-color: #fff;
   border-radius: 50%;
   z-index: 1;
   transition: 0.5s;
}

.indicator::before {
   content: "";
   position: absolute;
   top: 5px;
   left: -28px;
   width: 30px;
   height: 30px;
   background-color: transparent;
   border-radius: 50%;
   box-shadow: 15px 18px #fff;
}

.indicator::after {
   content: "";
   position: absolute;
   top: 5px;
   right: -28px;
   width: 30px;
   height: 30px;
   background-color: transparent;
   border-radius: 50%;
   box-shadow: -15px 18px #fff;
}

.nav li:nth-child(1).active~.indicator {
   transform: translateX(calc(70px*0));
}

.nav li:nth-child(2).active~.indicator {
   transform: translateX(calc(70px*1));
}

.nav li:nth-child(3).active~.indicator {
   transform: translateX(calc(70px*2));
}

.nav li:nth-child(4).active~.indicator {
   transform: translateX(calc(70px*3));
}

.nav li:nth-child(5).active~.indicator {
   transform: translateX(calc(70px*4));
}

.nav li:nth-child(6).active~.indicator {
   transform: translateX(calc(70px*5));
}

.nav li:nth-child(7).active~.indicator {
   transform: translateX(calc(70px*6));
}



.nav ul li.active span {
   background: var(--clr);
}

.nav ul li span::before {
   background: var(--clr);
}

/* 底部导航栏结束 */

/* 侧边栏开始 -- 左 */
.left_herd {
   position: absolute;
   left: 25vh;
   top: 0;
   z-index: 5;
   width: 60px;
   height: 100px;
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
   background-color: rgba(255, 255, 255, .6);
   text-align: center;
}

.left_herd div {
   padding: 10px 5px 0 5px;
   height: 50px;
   font-size: 20px;
}

/* 侧边栏开始 -- 右 */
.right_herd {
   position: absolute;
   top: 0;
   z-index: 5;
   width: 60px;
   height: 100px;
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
   background-color: rgba(255, 255, 255, .6);
   text-align: center;
   right: 25vh;
}

/* 侧边栏结束 */




/* 中间card */
.div_card {
   position: relative;
   top: -4vh;
   border-radius: 50px;
   height: 75vh;
   width: 80%;
   backdrop-filter: contrast(90%) blur(30px);
   background-color: rgba(255, 255, 255, 0.6);
}


.el-container {
   height: 100vh;
   display: flex;
   flex-direction: column;
}


/* 侧边导航栏 */
.div_active_top {
   position: absolute;
   top: 6%;
   left: 4%;
   z-index: 10;
   width: 60px;
   height: 88%;
   border-radius: 28px;
   background-color: rgb(255, 255, 255);
   text-align: center;
   display: flex;
   flex-direction: column;
}

.div_active_top .el-card__body {
   padding: 0;
}

/* 侧边导航头像 */
.el-avatar {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin: 0 auto;
}

/* 侧边导航昵称 */
.div_active_top span {
   display: block;
   font-size: 16px;
   color: orange;
   margin-top: 20%;
}

/* 侧边导航菜单 */
.el-menu {
   border: 0;
   margin: auto 0;
   display: flex;
   flex-direction: column;
}

/* 侧边导航子菜单 */
.el-menu-item {
   border-radius: 50%;
   margin: 10px 0;
   text-align: center;

}

.el-menu-item [class^=el-icon-] {
   width: 100%;
}

.el-menu-item:focus {
   outline: 0;
   background-color: transparent;
}

.el-menu-item:hover {
   outline: 0;
   background-color: orange;
}

/* 侧边导航退出登录 */
.div_active_bottom {
   position: absolute;
   bottom: 0;
   width: 60px;
   height: 60px;
   display: flex;
   flex-direction: column;
}

.div_active_bottom i {
   padding-top: 10px;
   font-size: 35px;
   cursor: pointer;
}

.div_active_bottom i:hover {
   color: red;
}

/* main方法路由卡片定位 */
#div_main_card {
   margin-top: 10vh;
   padding-left: 20px;
   display: flex;
   flex-direction: column;
}

/* main方法初始化 */
.el-main {
   padding: 0;
   display: flex;
   flex-direction: column;
}

/* 方块 */
.div_block {
   position: absolute;
   width: 60vh;
   height: 60vh;
   top: 50%;
   left: -30vh;
   transform: translateY(-50%) rotate(45deg);
   background-color: rgba(223, 253, 255, .6);
   display: flex;
   flex-direction: column;
   border: 0;
   animation: block 2s ease-in-out infinite alternate;
}

@keyframes block {
   from {
      box-shadow: 0 0 4px #68edc6;
   }

   to {
      box-shadow: 0 0 20px #68edc6;
   }

}


/* 圆 */
.div_garden {
   position: absolute;
   width: 50vh;
   height: 50vh;
   background-color: rgb(255, 192, 203);
   border-radius: 50%;
   animation: move 15s linear infinite;
}

/* 圆动画 */
@keyframes move {
   0% {
      bottom: -40vh;
      right: -5vh;
   }

   2% {
      bottom: -39vh;
      right: -6vh;
   }

   27.5% {
      bottom: -30vh;
      right: -15vh;
   }

   48% {
      bottom: -21vh;
      right: -24vh;
   }

   50% {
      bottom: -20vh;
      right: -25vh;
   }

   52% {
      bottom: -21vh;
      right: -24vh;
   }

   72.5% {
      bottom: -30vh;
      right: -15vh;
   }

   98% {
      bottom: -39vh;
      right: -6vh;
   }

   100% {
      bottom: -40vh;
      right: -5vh;
   }



}